import React from 'react';
import Utils from '../../utils/utils'
import {Row,Col,Button,Icon,Dropdown,Menu} from 'antd'
import './index.less'
export default class PageTitle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isMobile: false,
        }
    }
    componentWillMount() {
        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize)//监听器
    }
    onWindowResize = () => {
        if (document.body.offsetWidth >= 768) {
            this.setState({
                isMobile: false
            })
        } else {
            this.setState({
                isMobile: true
            });
        }
    };
    componentWillUnmount() {//移除监听器
        window.removeEventListener('resize', this.onWindowResize);
    }

    ABC(methodName){
        this.props.buttonMethods(methodName);
    }

    getMenuList(){
        let array=[];
        for(let button of this.props.buttonList){
            array.push(
                <Menu.Item key={button.name}>
                    <div onClick={this.ABC.bind(this,button.methodName)}>
                        <Icon type={button.icon} />
                        <span style={{marginLeft:10}}>
                             {button.name}
                        </span>

                    </div>
                </Menu.Item>
            )
        }
        return (
            <Menu>
                {array}
            </Menu>
        )
    }
    getButtonList=()=>{
        if(this.props.buttonList){
            if(this.state.isMobile){
                const menuList=this.getMenuList()
                return(
                    <Dropdown overlay={menuList} trigger={['click']} placement="bottomRight">
                    <span >
                          操作菜单 <Icon type="down" />
                    </span>
                    </Dropdown>
                )
            }else{
                const buttonList=this.props.buttonList;
                var items = [];
                for (let button of buttonList) {
                    if (button.isShow) {
                        items.push(
                            <Button type="primary"  key={button.name} style={{marginLeft: 10}} icon={button.icon}
                                    onClick={this.ABC.bind(this,button.methodName)}
                            >

                                {button.name}
                            </Button>
                        )
                    }
                }
                return items
            }
        }


    };
    render() {
        return (
            <div className="topDivStyle">
                <Row>
                    <Col xs={12} sm={12} md={12} lg={6} xl={6} className="page_title">
                        <Icon type="code" style={{fontSize: 20}}/>
                        <span style={{ paddingLeft: 5}}>{this.props.title}</span>
                    </Col>
                    <Col xs={12} sm={12} md={12} lg={18} xl={18} className="button_list">
                        {this.getButtonList()}
                    </Col>
                </Row>
            </div>)
    }
}